<template>
  <div class="pageBox">
    <head-component
      title="忘记密码"
      :back="true"
      :backIcon="backIcon"
    ></head-component>
    <div class="main">
      <img class="caisetiao_icn" src="@/image/login/caisetiao_icn.png" alt="" />

      <div class="iptBox">
        <div class="iptTitle">手机号</div>
        <div class="iptItem flex-between">
          <input
            type="text"
            class="ipt"
            v-model="form.mobile"
            placeholder="请输入手机号"
          />
        </div>
      </div>

      <div class="iptBox">
        <div class="iptTitle">验证码</div>
        <div class="iptItem flex-between">
          <input
            type="text"
            class="ipt"
            v-model="form.captcha"
            placeholder="请输入您的验证码"
          />
          <button
            class="captBtn"
            @click="onCaptBtn"
            :disabled="captBtnDisabled"
          >
            {{ captBtnText }}
          </button>
        </div>
      </div>

      <div class="iptBox">
        <div class="iptTitle">设置新密码</div>
        <div class="iptItem flex-between">
          <input
            type="password"
            class="ipt"
            v-model="form.password"
            placeholder="设置新的登录密码"
          />
        </div>
      </div>

      <div class="iptBox">
        <div class="iptTitle">确认密码</div>
        <div class="iptItem flex-between">
          <input
            type="password"
            class="ipt"
            v-model="form.password2"
            placeholder="再次输入您的密码"
          />
        </div>
      </div>

      <button class="subBtn" @click="onSubBtn">立即修改</button>

      <div class="noAccount flex-center">
        <button @click="$router.push('/login')">去登录</button>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { Toast } from "vant";
import { defineComponent, reactive, ref } from "vue";
import headComponent from "../../components/headComponent.vue";
import router from "../../router";
import { post } from "../../untils/request";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    const backIcon = require("../../image/header/fanhui2_btn.png");
    const captBtnText = ref("发送验证码");
    const captBtnDisabled = ref(false);

    const form = reactive({
      mobile: "",
      captcha: "",
      password: "",
      password2: "",
    });

    function onCaptBtn() {
      if (!form.mobile) {
        Toast("请输入手机号");
        return;
      }
      post("/portal", {
        module: "Account",
        interface: "1003",
        data: {
          account: form.mobile,
        },
      }).then(() => {
        Toast("发送成功");
        let time = 60;
        let timer = setInterval(() => {
          time--;
          if (time <= 0) {
            clearInterval(timer);
            timer = null;
            captBtnText.value = "发送验证码";
            captBtnDisabled.value = false;
          } else {
            captBtnText.value = `${time}s`;
            captBtnDisabled.value = true;
          }
        }, 1000);
      });
    }

    function onSubBtn() {
      if (!form.mobile) {
        Toast("请输入手机号");
        return;
      }
      if (!form.captcha) {
        Toast("请输入您的验证码");
        return;
      }
      if (!form.password) {
        Toast("请设置新的登录密码");
        return;
      }
      if (form.password != form.password2) {
        Toast("密码输入不一致");
        return;
      }
      post("/portal", {
        module: "Account",
        interface: "1004",
        data: {
          account: form.mobile,
          captcha: form.captcha,
          password: form.password,
        },
      }).then(() => {
        Toast("重置密码成功");
        setTimeout(() => {
          router.push("/login");
          localStorage.removeItem("mobile");
          localStorage.removeItem("password");
        }, 1000);
      });
    }

    return {
      form,
      backIcon,
      captBtnText,
      captBtnDisabled,
      onCaptBtn,
      onSubBtn,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 88px 30px 100px;
  .main {
    margin-top: 61px;
    background-color: #fff;
    background: #ffffff;
    box-shadow: 0px 6px 18px 0px rgba(230, 230, 230, 0.5);
    border-radius: 20px;
    position: relative;
    padding: 10px 40px 75px;

    .caisetiao_icn {
      width: 100%;
      height: 10px;
      position: absolute;
      left: 0;
      top: 0;
    }
    .iptBox {
      border-bottom: 1px solid #dce2f5;
      padding-bottom: 13px;
      margin-top: 60px;
      .iptTitle {
        font-size: 36px;
        font-weight: 400;
        color: #333333;
      }
      .iptItem {
        margin-top: 15px;
        .ipt {
          background-color: transparent;
          border: none;
          color: #333;
          font-size: 28px;
          font-weight: 400;
        }
        .captBtn {
          background: transparent;
          border: none;
          font-size: 28px;
          font-weight: 400;
          color: #e00b12;
        }
      }
    }
    .subBtn {
      font-size: 32px;
      font-weight: 500;
      color: #ffffff;
      width: 100%;
      height: 88px;
      background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
      box-shadow: 0px 8px 20px 0px rgba(204, 58, 70, 0.4);
      border-radius: 16px;
      border: none;
      margin-top: 100px;
    }
    .noAccount {
      margin-top: 50px;
      button {
        font-size: 26px;
        font-weight: 400;
        color: #e00b12;
        background: transparent;
        border: none;
      }
    }
  }
}
</style>